<template>
  <div class="view-combox">
    <div class="subnav2">
      <div class="nav2">
        <ul>
          <li><a href="javascript:void(0)" @click.stop="selectCate({id: 0})" :class="params.cid <= 0 ? 'cur' : ''">全部</a></li>
          <li v-for="(item, index) in cate" :key="index">
            <a href="javascript:void(0)"
              :class="params.cid == item.id ? 'cur' : ''"
              @click.stop="selectCate(item)"
            ><i :class="item.icon + ' f14'" ></i>&nbsp; {{item.name}}</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="scrollbox">
      <v-header
        :menus="menus"
        @selected="selectMenu"
      ></v-header>
      <div class="listbox aps9">
        <v-list
          api="resources.get_list"
          ref="list"
          cards="1"
          cols="30,280,0,100,80,140,90"
          :params="params"
          @afterFetchData="listType = 'list'">
          <template slot="search">
            <router-link :to="{path: '/resources/video/create'}">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-plus"
            >上传素材</el-button>
            </router-link>
            &nbsp;&nbsp;&nbsp;
            <el-dropdown @command="batchCateHandle">
              <el-button type="default" size="small">
                设置类别&nbsp;&nbsp;<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item  :command="'cate-'+item.id"  v-for="(item, index) in cate" :key="index">
                  <i :class="item.icon + ' f14'" ></i>&nbsp; {{item.name}}&nbsp;&nbsp;
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>&nbsp;&nbsp;
            <el-dropdown @command="batchHandle">
              <el-button type="default" size="small">
                更多操作<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item  command="del" style="display:none;">批量删除</el-dropdown-item>
                <el-dropdown-item  command="sh">批量审核</el-dropdown-item>
                <el-dropdown-item  command="unsh">取消审核</el-dropdown-item>

                <el-dropdown-item  command="intui">批量推荐</el-dropdown-item>
                <el-dropdown-item  command="untui">取消推荐</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>&nbsp;&nbsp;


          </template>
          <template slot="head" slot-scope="props">
            <thead>
              <tr>
                <th class="c1">
                  <input ref="listInputAll" type="checkbox" @click.stop="$refs.list.selAll" />
                </th>
                <th>视频</th>
                <th>
                  名称
                </th>
                <th>
                  大小
                </th>
                <th>
                  状态
                </th>
                <th>
                  时间
                </th>
                <th>操作</th>
              </tr>
            </thead>
          </template>
          <template slot="item" slot-scope="props">
            <tr>
              <td>
                <input
                  type="checkbox"
                  v-model="props.item.choose"
                />
              </td>
              <td>
                <div style="height: 130px;overflow: hidden;" @mouseenter="mouseoverVideo(props.item)" @mouseleave="mouseoutVideo(props.item)">
                <video height="130" :src="props.item.url" :poster="props.item.poster" autoplay="autoplay" loop muted v-if="payrid == props.item.rid"></video>
                <img :src="props.item.poster" height="130" v-else />
                </div>
              </td>
              <td>
              <a href="javascript:void(0)" @click.stop="edit(props.item)">  <span class="font-blue f14">
              <span class="font-gray" v-if="props.item.cname != ''">[{{ props.item.cname }}]</span><i class="el-icon-video-camera f14 font-blue"></i>
            {{ props.item.fname }} </span>
              <span v-if="props.item.intui==1" class="font-org">[推荐]</span>
              </a>
                <div class="font-gray" v-if="props.item.bz">
                  [{{props.item.bz}}]
                </div>
              </td>
              <td>
                <span class="font-gray">{{ props.item.fsize | formatSize }}</span>
              </td>
              <td>
                <span class="font-green" v-if="props.item.status == 1">已审</span>
                <span class="font-red" v-else>待审</span>
              </td>
              <td>
                {{props.item.dateline | dateFormat('yyyy-MM-dd HH:mm')}}
              </td>
              <td class="tr">
                <el-button v-if="props.item.status == 0" size="mini" type="danger" @click.stop="deleteResource(props.item)">删除</el-button>
              </td>
            </tr>
          </template>
        </v-list>
      </div>
    </div>

    <!-- 编辑 标签 分类 -->
    <v-popup
        class="pop"
        ref="popup_edit"
        :visible="editData.status"
        width="820px"
        :title="editData.title"
        icon="el-icon-close"
        @close="editData.status = false;editData.id=0"
      >
        <editTpl ref="edit" :rid="editData.id" @closeDialog="closeDialog" v-clickoutside="handleClickOutSide"></editTpl>
        <div slot="footer" class="tc"></div>
    </v-popup>
    <!-- 编辑 标签 分类 结束 -->

    <!-- 查看 -->
    <v-popup
        class="pop"
        ref="popup_view"
        :visible="viewData.status"
        width="820px"
        :title="viewData.title"
        icon="el-icon-close"
        @close="viewData.status = false;viewData.id=0"
      >
        <viewTpl ref="view" :id="editData.id" v-clickoutside="handleClickOutSide"></viewTpl>
        <div slot="footer" class="tc"></div>
    </v-popup>
    <!-- 查看 结束 -->

  </div>
</template>
<script>
import { default as viewTpl } from "./view"
import { default as editTpl } from "./edit"
import clickoutside from "@lib/clickoutside";
import cache from "@cache";
export default {
  components: {
    viewTpl,
    editTpl
  },
  directives: {
    clickoutside
  },
  data() {
    return {
      menus: [],
      params: {type: 'video', cid: 0, tag_id: 0, status: 1},
      editData: { status: false, id: 0, title: "" },
      viewData: { status: false, id: 0, title: "" },
      payrid: 0,
      cate: []
    };
  },
  methods: {
    getMenu () {
      this.$api.get("resources.menus", this.params).then((res) => {
        if (res.status == 1) {
          this.menus = res.data
        }
      })
    },
    selectMenu (item) {
      this.params.status = item.key
    },
    mouseoverVideo (item) {
      this.payrid = item.rid
    },
    mouseoutVideo (item) {
      this.payrid = 0
    },
    handleClickOutSide() {
      if (this.viewData.status) {
        this.viewData.status = false;
        return false
      }
      if (this.editData.status) {
        this.editData.status = false
        return false
      }
    },
    closeDialog(){
      this.editData.status = false
      this.$refs.list.fetchData()
    },
    batchCateHandle (command) {
      let c = command.split('-')
      let ids = this.$refs.list.fetchSel('rid')
      if (!ids || ids.length <1) {
        this.$error('请选择要操作的素材')
        return false
      }
      let that = this
      that.$confirm('此操作会将批量设置素材类别, 是否继续?', '批量分类提醒').then(() => {
        let url = 'resources.batchcate'
        that.$api.post(url, { ids: ids, cid: c[1] }).then((res) => {
          if (res.status === 1) {
            that.$success(res.msg)
            that.$refs.list.fetchData()
          } else {
            that.$error(res.msg)
          }
        })
      })
    },
    batchHandle (command) {
      let ids = this.$refs.list.fetchSel('rid')
      if (!ids || ids.length <1) {
        this.$error('请选择要操作的素材')
        return false
      }
      if (command == 'del') {
        // this.batchDel(ids)
      } else if (command == 'sh') {
        this.batchSh(ids, 1)
      } else if (command == 'unsh') {
        this.batchSh(ids, 0)
      } else if (command == 'intui') {
        this.batchIntui(ids, 1)
      } else if (command == 'untui') {
        this.batchIntui(ids, 0)
      }
    },
    batchSh (ids, insh) {
      let that = this
      that.$confirm('此操作会将' + (insh ? '审核' : '取消审核') + ', 是否继续?', '批量操作提醒').then(() => {
        let url = 'resources.batchsh'
        that.$api.post(url, { ids: ids, insh: insh }).then((res) => {
          if (res.status === 1) {
            that.$success(res.msg)
            that.$refs.list.fetchData()
            that.getMenu()
          } else {
            that.$error(res.msg)
          }
        })
      })
    },
    batchIntui (ids, intui) {
      let that = this
      that.$confirm('此操作会将' + (intui ? '推荐' : '取消推荐') + ', 是否继续?', '批量操作提醒').then(() => {
        let url = 'resources.batchintui'
        that.$api.post(url, { ids: ids, intui: intui }).then((res) => {
          if (res.status === 1) {
            that.$success(res.msg)
            that.$refs.list.fetchData()
            that.getMenu()
          } else {
            that.$error(res.msg)
          }
        })
      })
    },
    edit (item) {
      this.editData.status = true
      this.editData.title = item.fname
      this.editData.id = item.rid
    },
    deleteResource(item) {
      let that = this
      that.$confirm('此操作会将该彻底删除，不可恢复, 是否继续?', '删除提醒').then(() => {
        let url = 'resources.del'
        that.$api.post(url, { rid: item.rid }).then((res) => {
          if (res.status === 1) {
            that.$success(res.msg)
            that.$refs.list.fetchData()
            that.getMenu()
          } else {
            that.$error(res.msg)
          }
        })
      }).catch(() => {
      })
    },
    selectCate (item) {
      this.params.cid = item.id
      this.getMenu()
    },
    getCate () {
      this.$api
        .get("resources_cate.get_list", { type: 'video' })
        .then(res => {
            if (res.status == 1) {
              this.cate = res.data.list
            }
        });
    }
  },
  mounted() {
    this.getCate()
    this.getMenu()
  }
};
</script>
<style lang="scss" scoped>
.inblock-span {
  position: absolute;
  top: 1px;
  left: 0px;
}
.groupList {
  background-color: white;
  padding-top: 50px;
  padding-left: 30px;
  height: 100%;
  overflow: auto;
}
.groupList .group-ul li {
  color: #7d8c91;
  font-weight: 400;
  font-size: 12px;
  height: 40px;
  line-height: 40px;
}
.groupList .group-ul .group-name {
  cursor: pointer;
  display: inline-block;
  max-width: 82px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.group-ul .count-bubble {
  padding: 1px 6px;
  background-color: #7d8c91a1;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: white;
}

.pop /deep/ .pop_content {
  padding-top: 10px !important;
}
.graphTable {
  width: 100%;
  margin: 0 auto;
  border: 1px solid #dcdfe6;
  margin: 0;
  border-collapse: collapse;
  border-spacing: 0;
}

.graphTable td {
  padding: 5px 0px;
  text-align: center;
  font-size: 13px;
}

.tdP {
  display: inline-block;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exportLoading {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  text-align: center;
  line-height: 500px;
  font-size: 18px;
  font-weight: 700;
  // color: white;
  height: 100%;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.096);
}
.graph-tool-box {
  padding: 0 55px !important;
  background-color: white !important;
}
.imgTr:hover .graph-tool-box {
  background-color: transparent !important;
}
.imgTr td {
  padding: 0px;
}
.imgTr td td {
  padding: 25px 0;
}
</style>
